<template>
	<view>
		<view class="progress0" v-if="progress === 0">
			<view class="text">
				请等待医生问诊完成......
			</view>
		</view>
		
		<view class="progress1" v-else-if="progress === 1">
			<view class="text">
				医生已经问诊完成，正在开药中......
			</view>
		</view>
		
		<view class="progress2" v-else-if="progress === 2">
			<!-- <view class="text">
				药品发放成功，您可以凭借下方二维码取药
			</view> -->
			<view class="pr_top_text" @click="MakeQrcode">
				凭二维码取药
			</view>
			<image v-if="qrcode_url == ''" class="qrcode" src="/static/qrcode.png" mode=""></image>
			<image v-else class="qrcode" :src="qrcode_url" mode=""></image>
			<view class="pr_message">
				<!-- <navigator url="/pages/home/home" open-type="navigate" class="home">首页</navigator> -->
				<view class="home" @click="goHome">首页</view>
				<view class="my" @click="goMy">个人中心</view>
			</view>
		</view>
		
		<view class="progress3" v-else-if="progress === 3">
			<view class="text">
				取药成功
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name:"sun-medicine",
		props: {
			progress: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				qrcode: '',
				qrcode_url: ''
			};
		},
		created() {
			this.MakeQrcode()
		},
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		methods: {
			goHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			goMy() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			async MakeQrcode() {
				let openid = this.userinfo.code_response.openid.toLowerCase()
				const {data: res} = await uni.$http.get('/jwt/?status=encode&message=' + openid)
				let jwt_data = openid + ',' + res.data.toLowerCase()
				this.jwt_data = jwt_data
				console.log(jwt_data);
				this.Qrcode(jwt_data)
			},
			async Qrcode(jwt_data) {
				const {data: res} = await uni.$http.get('/qrcode/?message=' + jwt_data)
				this.qrcode_url = 'http://' + res.image
				console.log(res);
			}
		}
	}
</script>

<style lang="scss">
	.text {
		padding-left: 5px;
		padding-top: 20px;
		font-size: 25px;
		margin: 0 auto;
		color: #b1b2b4;
	}
	.qrcode {
		width: 11rem;
		height: 11rem;
		padding-left: 4rem;
		padding-top: 2rem;
	}
	.pr_top_text {
		font-size: 15px;
		color: #b1b2b4;
		padding-top: 2rem;
		padding-left: 6.5rem;
	}
	.pr_message {
		display: flex;
		margin-top: 2rem;
		justify-content: center;
		color: #0a6db8;
		margin-right: 1.2rem;
		.my {
			margin-left: 1rem;
			padding-left: 1rem;
			border-left: 1px solid #cdced1;
		}
	}
</style>
